<template>
  <draggable :list="data" :item-key="key" @end="changeBtn" class="drag-container">
    <template #item="{ element }">
      <div class="drag-item" :style="style" :class="class">
        <slot name="item" :element="element" v-if="$slots.item"></slot>
        <p v-else>{{ element.name }}</p>
      </div>
    </template>
  </draggable>
</template>
<script setup lang="ts">
//拖拽
import draggable from 'vuedraggable';
import { onMounted, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data: any;
    key?: string;
    style?: any;
    class?: any;
  }>(),
  {
    key: 'id'
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', val: any, row: any): void;
}>();
const changeBtn = (event: any) => {
  emit('changeBtn', event, props.data);
};
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss">
.drag-container {
  display: flex;
  flex-direction: column;

  .drag-item {
    cursor: grab;
  }
}
</style>
